<template>
  <!--组织架构  -->
  <div class="departments">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first">
          <TreeItem :item="topItem" />

          <hr>
          <el-tree :data="list">
            <template v-slot="{ data }">
              <TreeItem :item="data" @getdata="getdata" />
            </template>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- Dialog 对话框 -->
    <DialogCom :init="initList" @getdata="getdata" />
  </div>
</template>
<script>
import TreeItem from './components/treeItem.vue'
import DialogCom from './components/dialogCom.vue'
import { companyDepartmentGet } from '@/api/departments'
export default {
  name: 'Departments',
  components: {
    TreeItem,
    DialogCom
  },
  data() {
    return {
      topItem: {
        name: '传智教育'
      },
      activeName: 'first',
      list: [],
      initList: [],
      str: ''
    }
  },
  created() {
    this.getdata()
  },
  methods: {
    async getdata() {
      const res = await companyDepartmentGet()
      this.initList = [...res.data.depts]
      this.topItem = res.data.depts.shift()
      this.topItem.id = ''
      this.list = this.IntegrateData(res.data.depts, this.str)
    },
    IntegrateData(arr, str = '') {
      return arr.filter((item) => {
        if (item.pid === str) {
          item.children = this.IntegrateData(arr, item.id)
          return item
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 30px;
  height: 100%;

  .el-tab-pane {
    padding: 20px 100px;
  }
}
</style>
